<template>
  <div class="banner">
    <!-- 推荐尺寸：宽2560px 高350px -->
<!--    <a href="https://item.jd.com/100058776147.html" target="_blank" title="极空间官方旗舰店">-->
<!--      <img class="layer_img" src="https://v.hilx.cn/app/admin/upload/files/20250810/68988a57a36a.jpg" width="100%" title="极空间官方旗舰店" />-->
<!--    </a>-->
    <a v-if="bannerData" :href="bannerData.href" target="_blank" :title="bannerData.title">
      <img class="layer_img" :src="bannerData.image" width="100%" :title="bannerData.title" alt="极空间官方旗舰店"/>
    </a>
  </div>
</template>

<style>
  .banner{
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px;
  }
</style>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
interface BannerData {
  href: string
  title: string
  image: string
}
const bannerData = ref<BannerData | null>(null)

const fetchBannerData = async () => {
  try {
    // 接口地址
    const response = await fetch('https://api.hilx.cn/likeadmin/slide/index?scene_sn=6ebf0e5b2326da416309a2470bfb68b8')
    const result = await response.json()
    // 从 items 数据集中获取第一条数据
    if (result.data && result.data.items && result.data.items.length > 0) {
      const item = result.data.items[0]
      bannerData.value = {
        href: item.href,
        title: item.title,
        image: item.image
      }
    }
  } catch (error) {
    console.error('获取 Banner 数据失败:', error)
    // 可以设置默认数据或显示错误状态
  }
}

onMounted(() => {
  fetchBannerData()
})
</script>